<template>
  <view class="flex justify-between px-[120rpx_200rpx] relative mt-[40rpx]">
    <!-- 进度条背景 -->
    <!-- <view class="absolute bottom-[-2rpx] left-[200rpx] right-[200rpx] h-[8rpx] bg-[#e0e0e0] z-[1] rounded-[4rpx]">
      <view class="h-full bg-[#4caf50] transition-all duration-500 rounded-[4rpx]"
        :style="{ width: progressWidth + '%' }"></view>
    </view> -->

    <!-- 步骤1 -->
    <view class="flex flex-col items-center z-[2]">
      <view
        class="w-[72rpx] h-[72rpx] rounded-full flex items-center justify-center font-bold mb-[16rpx] border-4 transition-all duration-300 bg-[#4caf50] text-white border-[#4caf50]">
        <text class="text-[32rpx]">1</text>
      </view>
      <text class="text-[28rpx] text-center transition-all duration-300 text-white font-bold">身份验证</text>
    </view>

    <!-- 步骤2 -->
    <view class="flex flex-col items-center z-[2]">
      <view
        class="w-[72rpx] h-[72rpx] rounded-full flex items-center justify-center font-bold mb-[16rpx] border-4 transition-all duration-300 bg-[#4caf50] text-white border-[#4caf50]">
        <text class="text-[32rpx]">2</text>
      </view>
      <text class="text-[28rpx] text-center transition-all duration-300 text-white font-bold">签署协议</text>
    </view>


    <!-- 步骤3 -->
    <view class="flex flex-col items-center z-[2]">
      <view
        class="w-[72rpx] h-[72rpx] rounded-full flex items-center justify-center font-bold mb-[16rpx] border-4 transition-all duration-300 bg-[#4caf50] text-white border-[#4caf50]">
        <text class="text-[32rpx]">3</text>
      </view>
      <text class="text-[28rpx] text-center transition-all duration-300 text-white font-bold">完成注册</text>
    </view>

  </view>
</template>

<script setup lang="ts">
const props = defineProps<{
  progressWidth: number
  step2Active: boolean
  step3Active: boolean
  handleCreateContract: () => void
}>()
</script> 